<script setup lang="ts" name="Template02">
import earth from '@/assets/login/template02/earth.svg'
</script>

<template>
  <div class="login-container">
    <Transition appear enter-active-class="animate__animated animate__bounceInLeft">
      <div class="flex w-1/2 lt-xl:hidden items-center justify-center">
        <component :is="earth" class="fill-[var(--el-color-primary)] w-2/3 h-auto opacity-40" />
      </div>
    </Transition>
    <Transition appear enter-active-class="animate__animated animate__bounceInRight">
      <div class="login-box w-1/2 lt-xl:w-full">
        <div class="w-full sm:max-w-500px">
          <slot />
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  position: relative;
  display: flex;
  width: 100vw;
  min-height: 100vh;
  padding: var(--el-space);
  overflow-y: hidden;
  background-color: var(--el-bg-color);
  align-items: center;
  justify-content: center;
}

.login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all .28s;
}
</style>
